<!doctype html>
<html>
<head>
    <title>CLNDR Demo With MarkDown</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bower_components/editor.md/css/editormd.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding:10px;">
    <div class="row" style="margin-bottom: 10px;">
        <div class="col-xs-12">
            <div class="btn-group">
            <button class="btn btn-default" id="back">上月</button>
            <button class="btn btn-default" id="next">下月</button>
        </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
        <div id="editormd">
            <textarea id="text" style="display:none;"></textarea>
        </div>
    </div>
    <div class="cal2">
        <script type="text/template" id="template-calendar">##<%= month %>
|<% _.each(daysOfTheWeek, function(day) { %><%= day %>|<% }); %>
|:----    |:---|:----- |-----   |<% for(var i = 0; i < numberOfRows; i++){ %>
|<% for(var j = 0; j < 7; j++){ %><% var d = j + i * 7; %><%
        if(!days[d].properties.isAdjacentMonth)
            if( days[d].properties.isToday )
                print('**'+days[d].day+'**');
            else
                print(days[d].day);
        %>|<% } %>
| * | * | * | * | * | * | * |<% } %></script>
    </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
<script src="//cdn.bootcss.com/clndr/1.4.5/clndr.min.js"></script>
<script src="bower_components/editor.md/editormd.min.js"></script>
<script>
    moment.locale('zh-cn');

    var editor;
    var calendar;

    $(document).ready(function () {
        var template = _.template($('#template-calendar').html());
        editor = editormd("editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "bower_components/editor.md/lib/"
        });

        calendar = $('.cal2').clndr({
            daysOfTheWeek: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期日'],
            template: $('#template-calendar').html(),
            render: function (data) {
                console.log(data);
                var data = template(data);
                var text = $('#text').html();
                if( text == '' ){
                    $('#text').html(data);
                }else{
                    editor.setCursor({line:0, ch:0});
                    editor.insertValue(data + '\n');
                }
                return '';
            }
        });
    });

    $('#next').on('click',function(){
        calendar.forward();
    });
    $('#back').on('click',function(){
        calendar.back();
    });

</script>
</body>
</html>